<template>
  <div :class="className" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import tableTheme from "./macarons.json";
export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    },

    xType: {
      // x轴类型 "category"/"value"/"log"
      type: String,
      default: "value"
    },
    yType: {
      // y轴类型"category"/"value"/"log"
      type: String,
      default: "value"
    },
    inverse: {
      // 是否翻转坐标轴
      type: Boolean,
      default: false
    },
    isSmooth: {
      // 是否平滑曲线
      type: Boolean,
      default: false
    },
    minorSplitLine: {
      // 是否显示次分隔线
      type: Boolean,
      default: false
    },
    interval: {
      // 刻度的显示间隔
      type: [String, Number],
      default: "auto"
    },
    yInterval: {
      // 刻度的显示间隔
      type: [String, Number],
      default: "auto"
    },
    xMin: {
      type: [String, Number],
      default: null // dataMin
    },
    xMax: {
      type: [String, Number],
      default: null // dataMax
    },
    yMin: {
      type: [String, Number],
      default: null // dataMin
    },
    yMax: {
      type: [String, Number],
      default: null // dataMax
    }
  },
  data () {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler (val) {
        if (val && val.seriesData && val.seriesData.length > 0) {
          this.setOptions(val);
        } else {
          this.setOptions({ xName: "", yName: "", seriesData: [], markLineData: [] });
        }
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy () {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart () {
      echarts.registerTheme("tableTheme", tableTheme);
      this.chart = echarts.init(this.$el, "tableTheme");
      // this.chart = echarts.init(this.$el, 'macarons')
      // this.setOptions(this.chartData)
    },

    setOptions ({ xName, yName, seriesData, markLineData }) {
      const options = {
        grid: {
          left: 15,
          right: 15,
          bottom: 15,
          top: 15,
          containLabel: true
        },
        xAxis: {
          name: xName,
          type: this.xType,
          nameLocation: "middle",
          nameTextStyle: {
            lineHeight: 25
          },
          min: this.xMin,
          max: this.xMax,
          interval: this.interval, // 间隔
          inverse: this.inverse, // 反转
          boundaryGap: false,
          minorTick: {
            show: false
          },
          minorSplitLine: {
            show: this.minorSplitLine,
            lineStyle: {
              color: "#999",
              type: "solid"
            }
          },
          splitLine: {
            show: true
          }
        },
        yAxis: {
          name: yName,
          type: this.yType,
          nameLocation: "middle",
          nameTextStyle: {
            lineHeight: 30
          },
          min: this.yMin,
          max: this.yMax,
          interval: this.yInterval, // 间隔
          minorTick: {
            show: false
          },
          minorSplitLine: {
            show: this.minorSplitLine,
            lineStyle: {
              color: "#999",
              type: "solid"
            }
          },
          axisLine: {
            show: true
          }
        },
        series: seriesData
      };
      // console.log("options", JSON.stringify(options));
      this.chart.setOption(options);
    }
  }
};
</script>
